import {
	onPageScroll,
	onReady
} from '@dcloudio/uni-app'
import {
	reactive,
	ref
} from 'vue'
/* 更加滑动的距离改变东西 */
let toPObj = reactive({
	mainTop: 0,
	mainHeight: 0,
	commentTop: 0,
	commentHeight: 0,
	detailTop: 0,
	detailHeight: 0
})
let toState = ref(0)
// 滑动改变状态栏
let headerShow = ref(true)
// 点击更改
function changeState(index, e) {
	switch (index) {
		case 0: {
			uni.pageScrollTo({
				scrollTop: toPObj.mainTop
			})
		}
		break;
	case 1: {
		uni.pageScrollTo({
			scrollTop: toPObj.commentTop -30
		})
	}
	break;
	case 2: {
		uni.pageScrollTo({
			scrollTop: toPObj.detailTop-30
		})
	}
	break;
	}
}

// 滑动 顶部改变
function scrollChange(scrollTop) {
	if (scrollTop > 0) {
		headerShow.value = false
	} else {
		headerShow.value = true
	}
}
function getTop() {
	setTimeout(() => {
		let query = uni.createSelectorQuery().in(this)
		// select选择id 为main距离顶部的距离
		query.select('#main').boundingClientRect(data => {
			toPObj.mainTop = Math.ceil(data.height) - Math.ceil(data.height)
			toPObj.mainHeight = Math.ceil(data.height)
		})
		// select选择id 为comment距离顶部的距离
		query.select('#comment').boundingClientRect(data => {
			toPObj.commentTop = toPObj.mainHeight
			toPObj.commentHeight = toPObj.mainHeight+ Math.ceil(data.height)
		})
		// select选择id 为detail距离顶部的距离
		query.select('#detail').boundingClientRect(data => {
			toPObj.detailTop = toPObj.commentHeight
		}).exec();
	},300)
}
// 获取距离顶部距离 createSelectorQuery().in(component)
export default function() {
	// 获取距离顶部的距离
	onReady(() => {
		getTop()
	})
	// 滑动
	onPageScroll((res) => {
		let {
			scrollTop
		} = res
		scrollTop = Math.ceil(scrollTop)
		let {
			mainTop,
			detailTop,
			commentTop
		} = toPObj
		if (scrollTop >= mainTop && scrollTop < commentTop- 30 ) {
			toState.value = 0
		} else if (scrollTop >= commentTop- 30 && scrollTop < detailTop- 30) {
			toState.value = 1
		} else if (scrollTop >= detailTop- 30) {
			toState.value = 2
		}
		/* 滑动改变状态 */
		scrollChange(scrollTop)
	})
	return {
		toState,
		changeState,
		headerShow,
		getTop
	}
}
